<template>
  <AppPage>
    <ElEmpty :description="description" />
  </AppPage>
</template>
<script lang="ts" setup>
import router from "@/router";
import { useRoutePermission } from "@/store";

const routePermission = useRoutePermission();

const route = useRoute();

const target = computed(() =>
  decodeURIComponent((route.query.target as string) || ""),
);

const targetPath = computed(
  () => new URL(target.value, window.location.origin).pathname,
);

const needReplace = computed(() => {
  return (
    targetPath.value &&
    !routePermission.checkNeedGoToAuthPage({
      path: targetPath.value,
    })
  );
});

const title = computed(() => {
  return decodeURIComponent((route.query.title as string) || "");
});

const description = computed(() => {
  return target.value
    ? `暂无权限访问${title.value ? `[${title.value}]` : ""}页面:${target.value}`
    : "暂无权限访问";
});

watch(
  needReplace,
  (n) => {
    if (n) {
      router.replace(targetPath.value);
    }
  },
  {
    immediate: true,
  },
);
</script>
